<template>
  <div class="centent">
    <!-- 页头 -->
    <div>
      <a-breadcrumb>
        <a-breadcrumb-item>文章管理</a-breadcrumb-item>
        <a-breadcrumb-item>文章列表</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 表格操作区 -->
    <div class="tb-op">
      <!-- 左侧操作区 -->
      <div>
        <a-button size="small" type="primary" @click="jumpToCreate"
          >创建文章</a-button
        >
      </div>
      <!-- 右侧搜索区 -->
      <div class="tb-search">
        <a-input-search
          :style="{ width: '320px' }"
          placeholder="请输入文章标题进行过滤"
          search-button
          v-model="listBlogQuery.keywords"
          @search="handleSearch"
          @keyup.enter="handleEnterSearch"
        />
      </div>
    </div>
    <!-- 表格展示区 -->
    <div class="table">
      <a-table
        :data="data"
        :loading="listBlogLoading"
        :pagination="pagination"
        @page-size-change="pageSizeChangedHandler"
        @page-change="pageChangedHandler"
      >
        <template #columns>
          <a-table-column title="标题" data-index="title"></a-table-column>
          <a-table-column title="作者" data-index="author"></a-table-column>
          <a-table-column title="概要" data-index="summary"></a-table-column>
          <a-table-column title="状态" data-index="status"></a-table-column>
          <a-table-column title="操作" align="center">
            <template #cell="{ record }">
              <a-space>
                <a-button
                  size="small"
                  status="danger"
                  @click="DeleteBlog(record)"
                  >删除
                </a-button>
                <a-button
                  size="small"
                  type="primary"
                  @click="jumpToUpdate(record)"
                  >编辑
                </a-button>
                <a-button size="small" type="primary" @click="PatchBlog(record)"
                  >发布
                </a-button>
                <a-button
                  size="small"
                  type="primary"
                  @click="jumpToDetail(record)"
                  >查看
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { LIST_BLOG, DELETE_BLOG, PATCH_BLOG } from "@/api/blog";
import { Message } from "@arco-design/web-vue";
import { useRouter } from "vue-router";

// 获取router
const router = useRouter();

// 博客列表数据
const data = ref([]);
const pagination = reactive({
  total: 0,
  showTotal: true,
  showPageSize: true,
  showJumper: true,
  defaultPageSize: 20,
  current: 1,
  pageSizeOptions: [2, 10, 20, 30, 40, 50],
  pageSize: 20,
});
const listBlogLoading = ref(false);
const listBlogQuery = reactive({ page_size: 20, page_number: 1, keywords: "" });

const pageSizeChangedHandler = (pageSize) => {
  pagination.pageSize = pageSize;
  listBlogQuery.page_size = pageSize;
  // 采用后端分页, 页面大小变化是, 重新获取数据
  featchBlogList();
};

const pageChangedHandler = (page) => {
  pagination.current = page;
  listBlogQuery.page_number = page;
  featchBlogList();
};

// 访问后端API 拉却数据
const featchBlogList = async () => {
  try {
    listBlogLoading.value = true;

    console.log(listBlogQuery);
    const resp = await LIST_BLOG(listBlogQuery);
    console.log(resp);

    data.value = resp.items;
    pagination.total = resp.total;
  } catch (error) {
    // 反馈组件, 进行消息提醒
    Message.error({
      content: `获取博客列表失败: ${error.message}`,
      duration: 5000,
    });
  } finally {
    listBlogLoading.value = false;
  }
};

// 文章搜索
// value 是用户输入的值
const handleSearch = (value) => {
  listBlogQuery.keywords = value;
  featchBlogList();
};
const handleEnterSearch = () => {
  // 用户的输入 已经通过v-model 绑定到listBlogQuery
  featchBlogList();
};

// 文章创建
const jumpToCreate = () => {
  router.push("/backend/blog/create");
};

// 文章删除
const DeleteBlog = async (blog) => {
  console.log(blog);
  try {
    const resp = await DELETE_BLOG(blog.id);
    console.log(resp);
    // 删除成功后，界面需要更新, 重新请求列表页
    featchBlogList();
  } catch (error) {
    // 反馈组件, 进行消息提醒
    Message.error({
      content: `删除失败: ${error.message}`,
      duration: 5000,
    });
  }
};

// 编辑删除
const jumpToUpdate = async (blog) => {
  router.push({ name: "BackendBlogCreate", query: { id: blog.id } });
};

// 修改博客的状态(发布)
const PatchBlog = async (blog) => {
  blog.status = "published";
  let now = new Date();
  let req = { status: "published", pulished_at: now.getTime() / 1000 };
  try {
    await PATCH_BLOG(blog.id, req);

    // {status: "", pulished_at: }
    // 反馈组件, 进行消息提醒
    Message.success({
      content: `发布成功`,
      duration: 5000,
    });
    // 重新获取服务端的列表数据
    featchBlogList();
  } catch (error) {
    // 反馈组件, 进行消息提醒
    Message.error({
      content: `删除失败: ${error.message}`,
      duration: 5000,
    });
  }
};

// 文章查看
const jumpToDetail = (blog) => {
  router.push({ name: "FrontendBlogDetail", query: { id: blog.id } });
};

// 在页面加载完成后, 通过API请求数据
onMounted(featchBlogList);
</script>

<style lang="css" scoped>
.centent {
  display: flex;
  flex-direction: column;
}

.tb-op {
  display: flex;
  margin-top: 12px;
}

.tb-search {
  margin-left: auto;
}

.table {
  margin-top: 8px;
}
</style>
